<template>
  <view>
    <view class="notice-box">
      <view class="title">
        <text>您有新的运输任务</text>
        <view class="circle"></view>
      </view>
      <view class="content">
        <text class="car">运输车辆：京A 123456</text>
        <text class="route">运输路线：北京——广州</text>
      </view>
      <view class="footer">
        <text class="date">2022.05.04 13:00</text>
        <u-button shape="circle" text="查看详情" color="#EF4F3F" plain></u-button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'SystemNotice',
  components: {},
  data() {
    return {
      isRead: false,
      contentType: 201,
      page: 1,
      pageSize: 10
    }
  },
  async created() {
    const res = await uni.$http.get('/messages/page', {
      contentType: this.contentType,
      page: this.page,
      pageSize: this.pageSize
    })
    console.log(res)
  },
  mounted() {},
  async onLoad() {

  },
  methods: {}
}
</script>

<style lang="scss">
.notice-box {
  box-sizing: border-box;
  width: 345px;
  height: 150px;
  margin: 0 auto;
  padding: 0 20px 0 15px;
  border-radius: 10px;
  background-color: #fff;
  .title {
    display: flex;
    justify-content: start;
    align-items: center;
    height: 50px;
    border-bottom: 1px solid #f4f4f4;
    text {
      font-size: 14px;
    }
    .circle {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background-color: #ef4f3f;
      margin-left: 6px;
    }
  }
  .content {
    display: flex;
    align-items: center;
    height: 40px;
    font-size: 13px;
    color: #818181;
    .car {
      flex: 1;
      width: 50%;
    }
    .route {
      flex: 1;
      width: 50%;
    }
  }
  .footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    height: 45px;
    .date {
      flex: 1;
    color: #818181;
    }
    .u-button {
      width: 75px;
      height: 25px;
    }
  }
}
</style>
